<template>
    <div class="app-container">
        <el-table :key='tableKey' :data="orderList" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%" stripe>
            <el-table-column align="center" type="index" label="序号" width="60px"></el-table-column>
            <el-table-column align="center" label="计件时间" prop="createTime" width="160px;"></el-table-column>
            <el-table-column align="center" label="进厂批次" prop="batchCode"></el-table-column>
            <el-table-column align="center" label="所属医院" prop="hospitalName"></el-table-column>
            <el-table-column align="center" label="所属分组" prop="groupName"></el-table-column>
            <el-table-column align="center" label="衣物数量" prop="clothesCnt"></el-table-column>
            <el-table-column align="center" label="洗涤价格" prop="clothesMoney"></el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[20,50,100]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
  import { financeGroupDetail } from '@/api/finance'
  import { parseTime, formatSearchTime, formatMonthTime } from '@/utils'

  export default {
    name: 'SalaryGroupDetail',
    props: ['row'],
    data() {
      return {
        tableKey: 0,
        orderList: [],
        total: null,
        listLoading: false,
        listQuery: {
          page: 1,
          size: 20
        }
      }
    },
    created: function() {
      this.getDetail()
    },
    watch: {
      'row'(val) {
        if (val) {
          this.getDetail()
        }
      }
    },
    filters: {
      parseTime
    },
    methods: {
      getDetail() {
        this.listLoading = true
        let startTime = formatSearchTime(this.row.date + ' ', true)
        let endTime = formatSearchTime(this.row.date + ' ')
        if (this.row.searchType === 2) {
          startTime = formatMonthTime(this.row.date, true)
          endTime = formatMonthTime(this.row.date)
        }
        financeGroupDetail({ page: this.listQuery.page, size: this.listQuery.size, gid: this.row.gid, startTime: startTime, endTime: endTime }).then(response => {
          this.listLoading = false
          this.orderList = response.data && response.data.list || []
          this.total = Number.parseInt(response.data.count)
        }).catch(e => {
          this.listLoading = false
        })
      },
      handleSizeChange(val) {
        this.listQuery.size = val
        this.getDetail()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getDetail()
      }
    }
  }
</script>
